<template>
	
	<div>
	<div class="hgoods">
				<ul class="hgoods_show">
					<li class="hgd" v-for="item in items">
						<a href="javascript:void(0)" class="ha_mask"></a>
						<img :src='item.src' alt="鹿酒" class="hzonghe_img" />
						<div class="info_box">
							<strong class="hstrong">{{item.title}}</strong>
								<p>
								<em class="sale_tag">{{item.sale1}}</em>
								<em class="sale_tag">{{item.sale2}}</em>
								</p>
								<p>
									<b class="price">{{item.price}}</b>
								</p>
							<em class="comments">{{item.num}}人评论</em>
						</div>
					</li>					
				</ul>
			</div>
			<div class="bottom">
				<span class="content">没有更多商品了......</span>
				<a href="javascript:void(0)"></a>
			</div>
			<span class="hround hroundp">
				<a href="javascript:void(0)" class="iconfont icon-daohanggouwuche hcommon"></a>
			</span>
			<span class="hround hroundd">
				<a href="javascript:void(0)" class="iconfont icon-fanhuidingbu hcommon"></a>
			</span>
				
		
	</div>
	
	
</template>

<script>
	export default{
		name:"goods2",
		data(){
			return{
				items:[{src:require("../../../assets/zonghe/zhibao.jpg"),title:"张裕官方旗舰店【整箱特惠】04167 张裕至宝特质三鞭酒500ml*6",sale1:"满减",sale2:"券",price:"¥293",num:"21"},{src:require("../../../assets/zonghe/lujiu.jpg"),title:"买6得8 椰岛牌鹿龟酒 500ml*6瓶 下单即送同款鹿角酒和500g椰岛椰汁各一瓶(整箱)",sale1:"满减",sale2:"券",price:"¥228",num:"16"},{src:require("../../../assets/zonghe/dongchongxiacao.jpg"),title:"六瓶超值 康仁堂北冬虫夏草酒营养酒品牌健康滋补酒(125ml*6)",sale1:"满减",sale2:"券",price:"¥59",num:"0"},{src:require("../../../assets/zonghe/zhibao.jpg"),title:"张裕官方旗舰店【整箱特惠】04167 张裕至宝特质三鞭酒500ml*6",sale1:"满减",sale2:"券",price:"¥293",num:"21"},{src:require("../../../assets/zonghe/lujiu.jpg"),title:"买6得8 椰岛牌鹿龟酒 500ml*6瓶 下单即送同款鹿角酒和500g椰岛椰汁各一瓶(整箱)",sale1:"满减",sale2:"券",price:"¥228",num:"16"},{src:require("../../../assets/zonghe/dongchongxiacao.jpg"),title:"六瓶超值 康仁堂北冬虫夏草酒营养酒品牌健康滋补酒(125ml*6)",sale1:"满减",sale2:"券",price:"¥59",num:"0"}]
			}
		}
	}
	
	
</script>

<style scoped>
	
	/*商品列表*/
	.hgd{position: relative;margin-bottom: 2%;height: 9.2rem;}
	/*遮罩*/
	.ha_mask{width: 99%;height: 9.2rem;position: absolute;display: block;background: rgba(255,255,255,0.2);}
	.hgoods{margin-top: 0.2rem;}
	.hzonghe_img{width:28%;padding: 0 0.5rem;height: 9.2rem;}
	
	/*右侧描述*/
	.info_box{width: 65%;margin-left: 33%;margin-top: -108px;border-bottom: 1px solid rgba(204,204,204,0.4);padding-bottom: 0.2rem;}
	.sale_tag{border: 1px solid deeppink;font-style: normal;}
	.price{font-size: 1.4rem;color: deeppink;}
	/*strong行标签不能设置宽和高*/
	.hstrong{font-size: 1.05rem; height: 3rem;overflow: hidden;display: inline-block;}
	/*下移*/
	.down{margin-top: 108px;}
	/*评论*/
 .comments{font-size: 0.1rem !important;font-style: normal;}
 /*底部*/
.bottom{width:100%;height: 4rem; background: rgba(204,204,204,0.8); border:1px solid red;text-align: center; line-height: 4rem;}
 /*圆*/
.hround{width: 2.5rem;height: 2.5rem; line-height:2.5rem;border-radius: 50%;display: inline-block;text-align: center;box-shadow: 0 0 2px grey;}
.hcommon{text-decoration: none;color:grey;font-size: 2rem;}
.hroundp{position: fixed;right: 1.5rem;bottom: 15%;}
.hroundd{position: fixed;right: 1.5rem;bottom: 2%;}
/*筛选*/
.hselect_shaixuan{width:100%;}
/*圆*/
.h_round{width: 1.2rem;height: 1.2rem;border-radius: 50%;border: 0.5px solid deeppink;display: inline-block;text-align: right;line-height: 1.4rem;margin-left: 0.2rem;}

.container{display: flex;align-items: center;}
</style>